<script setup>
import { fetch7DayData } from '@/api/weatherAPI'
import { initStackedAreaChart } from '@/util/echarts'
import { ref, watch } from 'vue'

//声明前端页面所要展示的数据
const maxTemps = ref([]) //最高温度
const minTemps = ref([]) //最地温度
const fxDates = ref([]) //预报时间
const chartDom = ref(null) //vue3中获取dom元素的方式，此为第1步，声明一个引用
//引入状态管理
import { useCityStore } from '../stores/cityStore'
//获取store实例
const cityStore = useCityStore()
//添加侦听器:监听状态管理中location状态的变化
watch(
  //第1个参数【必选】：监听的数据源
  () => cityStore.location,
  //第2个参数【必选】：回调函数，当数据源有变化是，需要做的事情
  () => {
    getData(cityStore.location.id)
  },
  //第3个参数【可选】：即时回调，初始状态执行一个回调函数【网络请求未来24小时天气预报数据函数】
  { immediate: true }
)

// getData() //调用网络请求函数
//网络请求，异步获取api数据并进行处理
async function getData(locationID) {
  const res = await fetch7DayData(locationID)
  // console.log(res)
  res.daily.forEach((element) => {
    fxDates.value.push(element.fxDate)
    maxTemps.value.push(element.tempMax)
    minTemps.value.push(element.tempMin)
  })
  initStackedAreaChart(chartDom.value, fxDates.value, minTemps.value, maxTemps.value) //调用图表函数
}
</script>

<template>
  <!-- 添加图表库所需要的容器 -->
  <!-- vue3中获取dom元素的方式，此为第2步，在容器元素中添加ref属性与第1步中的引用进行绑定 -->
  <h3>未来7日天气预报</h3>
  <div id="main" ref="chartDom"></div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;
}
</style>
